<template>
  <div class="card-box">
    <template v-for="(item, index) in data" :key="index">
      <BasicCard>
        <div class="card-item">
          <div class="item-img">
            <img :src="efcRun" alt="" />
          </div>
          <div class="item-content">
            <div class="title">生产效率-{{ item.teamSet }}班</div>
            <div>
              平均： <i>{{ item.efcRun.toFixed(2) }}</i> %
            </div>
          </div>
        </div>
      </BasicCard>
    </template>
    <template v-for="(item, index) in data" :key="index">
      <BasicCard>
        <div class="card-item">
          <div class="item-img">
            <img :src="yarnWeight" alt="" />
          </div>
          <div class="item-content">
            <div class="title">理论产量-{{ item.teamSet }}班</div>
            <div>
              共计： <i>{{ item.theoreticalYarnWeight.toFixed(2) }}</i> kg
            </div>
            <div>
              平均日班产量： <i>{{ item.yarnWeightAvg.toFixed(2) }}</i> kg
            </div>
          </div>
        </div>
      </BasicCard>
    </template>
  </div>
</template>
<script setup lang="ts">
  import efcRun from '@/assets/images/data-report/efcRun.png'
  import yarnWeight from '@/assets/images/data-report/yarnWeight.png'

  defineProps({
    data: Array
  })
</script>
<style scoped lang="scss">
  .card-box {
    display: flex;
    margin-top: 20px;

    .el-card {
      flex: 1;
      min-width: 325px;
      margin-right: 24px;
      margin-bottom: 0;
      border: none;
    }

    .card-item {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 10px;
      //   padding: 30px 0;
      .item-img {
        width: 60px;
        height: 60px;
        margin-right: 40px;
      }

      .item-content {
        color: #4f5759;

        div {
          font-size: 12px;
          white-space: nowrap;
          i {
            color: #202121;
            font-size: 20px;
          }
        }

        .title {
          margin-bottom: 6px;
          font-size: 14px;
        }
      }
    }

    .card-item:last-child {
      margin-right: 0;
    }
  }
</style>
